@import '../../../common';

.panel {
    display: flex;

    &.horizontal {
        flex-direction: row;
        height: 100%;

        .grabber {
            height: 100%;
            width: 9px;
            cursor: col-resize;
            flex-direction: row;

            i {
                margin-left: -6px;
                font-size: 1.4em;
            }
        }

        .content {
            height: 100%;
        }
    }

    &.vertical {
        flex-direction: column;
        width: 100%;
        height: 100%;

        .grabber {
            width: 100%;
            height: 9px;
            cursor: row-resize;
            flex-direction: column;

            i {
                margin-top: -5px;
                font-size: 1.4em;
            }
        }

        .content {
            width: 100%;
        }
    }

    .grabber {
        display: flex;
        background-color: $greyBackground;
        align-items: center;
        z-index: 2;
        color: $darkTheme_grey_6;

        :host-context(.night) & {
            background-color: $darkBackground;
        }
    }

    .content {
        overflow: hidden;
        z-index: 2;

        &.disableSelection {
            user-select: none;
        }
    }
}
